import styled from "@emotion/styled";
import {Button, Spin, Typography} from "antd";
import { DevTools } from "jira-dev-tool";
import React from "react";

export const Row = styled.div<{
    gap?: number | boolean,
    between?: boolean
}>`
  display: flex;
  align-items: center;
  justify-content: ${props => props.between ? 'space-between' : undefined};

  > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: ${props => typeof props.gap === 'number' ? props.gap + 'rem' : props.gap ? '2rem' : undefined};
  }
`
const Fullpage = styled.div`
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`
export const FullPageLoading = () => <Fullpage>
    <Spin></Spin>
</Fullpage>
export const FullPageErrorFallback = ({error}: { error: Error|null }) => <Fullpage>
    <DevTools></DevTools>
    <Typography.Text type={'danger'}>{error?.message}</Typography.Text>
</Fullpage>

export const ButtonNoPadding=styled(Button)`
padding: 0`
